﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example10.aspx.cs" Inherits="Chapter27.Example10" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 27-10 在浏览器历史中保存状态</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <style>
        * {
            margin: 2px;
            padding: 4px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Name:</th>
            <td id="name"></td>
        </tr>
        <tr>
            <th>Color:</th>
            <td id="color"></td>
        </tr>
        <tr>
            <th>Size:</th>
            <td id="size"></td>
        </tr>
        <tr>
            <th>State:</th>
            <td id="state"></td>
        </tr>
        <tr>
            <th>event:</th>
            <td id="event"></td>
        </tr>
    </table>
    <button id="banana">Banana</button>
    <button id="apple">Apple</button>
    <script>
        if (window.history.state) {
            displayState(window.history.state);
            document.getElementById("state").innerHTML = "Yes";
        } else {
            document.getElementById("name").innerHTML = "No Selection";
        }

        window.onpopstate = function (e) {
            displayState(e.state);
            document.getElementById("event").innerHTML = "Yes";
        }

        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function (e) {
                var stateObj;
                if (e.target.id == "banana") {
                    stateObj = {
                        name: "banana",
                        color: "yellow",
                        size: "large"
                    }

                } else {
                    stateObj = {
                        name: "apple",
                        color: "red",
                        size: "medium"
                    }
                }
                window.history.pushState(stateObj, "");
                displayState(stateObj);
            };
        }

        function displayState(stateObj) {
            document.getElementById("name").innerHTML = stateObj.name;
            document.getElementById("color").innerHTML = stateObj.color;
            document.getElementById("size").innerHTML = stateObj.size;
        }
    </script>
</body>
</html>
